<template>
	<div class="login-form-wrapper">
		<div class="login-form-title">{{ $t('login.form.title') }}</div>
		<div class="login-form-sub-title">{{ $t('login.form.subtitle') }}</div>
		<div class="login-form-error-msg">{{ errorMessage }}</div>
		<a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
			<a-form-item
				field="username"
				:rules="[{ required: true, message: $t('login.form.userName.errMsg') }]"
				:validate-trigger="['change', 'blur']"
				hide-label
			>
				<a-input v-model="userInfo.username" :placeholder="$t('login.form.userName.placeholder')">
					<template #prefix>
						<icon-user />
					</template>
				</a-input>
			</a-form-item>
			<a-form-item
				field="password"
				:rules="[{ required: true, message: $t('login.form.password.errMsg') }]"
				:validate-trigger="['change', 'blur']"
				hide-label
			>
				<a-input-password v-model="userInfo.password" :placeholder="$t('login.form.password.placeholder')" allow-clear>
					<template #prefix>
						<icon-lock />
					</template>
				</a-input-password>
			</a-form-item>
			<a-space :size="16" direction="vertical">
				<div class="login-form-password-actions">
					<a-checkbox checked="rememberPassword" :model-value="loginConfig.rememberPassword" @change="setRememberPassword">
						{{ $t('login.form.rememberPassword') }}
					</a-checkbox>
					<a-link>{{ $t('login.form.forgetPassword') }}</a-link>
				</div>
				<a-button type="primary" html-type="submit" long :loading="loading">
					{{ $t('login.form.login') }}
				</a-button>
				<a-button type="text" long class="login-form-register-btn">
					{{ $t('login.form.register') }}
				</a-button>
			</a-space>
		</a-form>
	</div>
</template>
<script setup name="LoginForm">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
// import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
import { useI18n } from 'vue-i18n';
import { useStorage } from '@vueuse/core';
import { useUserStore } from '@/store';
import useLoading from '@/hooks/loading';

const router = useRouter();
const { t } = useI18n();
const errorMessage = ref('');
const { loading, setLoading } = useLoading();
const userStore = useUserStore();

const loginConfig = useStorage('login-config', {
	rememberPassword: true,
	username: 'admin', // 演示默认值
	password: '12456', // demo default value
});

const userInfo = reactive({
	username: loginConfig.value.username,
	password: loginConfig.value.password,
});

const handleSubmit = async ({ errors, values }) => {
	if (loading.value) return;
	if (!errors) {
		setLoading(true);
		try {
			await userStore.login(values);
			const { redirect, ...othersQuery } = router.currentRoute.value.query;
			console.log(decodeURIComponent(redirect));
			router.push({
				path: redirect ? decodeURIComponent(redirect) : '/dashboard',
				query: {
					...othersQuery,
				},
			});
			Message.success(t('login.form.login.success'));
		} catch (error) {
			errorMessage.value = error.message;
		} finally {
			setLoading(false);
		}
	}
};

const setRememberPassword = (value) => {
	loginConfig.value.rememberPassword = value;
};
</script>

<style lang="scss" scoped>
.login-form {
	&-wrapper {
		width: 100%;
		min-width: 420px;
		@media (max-width: $screen-xl) {
			min-width: 320px;
		}

		@media (max-width: $screen-lg) {
			min-width: 260px;
		}

		@media (max-width: $screen-md) {
			min-width: 240px;
		}

		@media (max-width: $screen-sm) {
			min-width: 160px;
		}
	}

	&-title {
		color: var(--color-text-1);
		font-weight: 500;
		font-size: 24px;
		line-height: 32px;
	}

	&-sub-title {
		color: var(--color-text-3);
		font-size: 16px;
		line-height: 24px;
	}

	&-error-msg {
		height: 32px;
		color: rgb(var(--red-6));
		line-height: 32px;
	}

	&-password-actions {
		display: flex;
		justify-content: space-between;
	}

	&-register-btn {
		color: var(--color-text-3) !important;
	}
}
</style>
